<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>设备维修</el-breadcrumb-item>
            <el-breadcrumb-item>维修记录</el-breadcrumb-item>
          </el-breadcrumb>
          <el-card>
            <el-row :gutter="30">
              <el-col :span="8">
                  <el-input v-model="input" placeholder="请输入设备名称" clearable>
                    <el-button slot="append" icon="el-icon-search" ></el-button>
                  </el-input>
              </el-col>
              <el-col :span="12">
                  <el-button type="primary" @click="addDialogVisible = true">添加维修记录</el-button>
              </el-col>
            </el-row>
              <el-table  height=360px stripe border style="width: 100%" ref="reference" 
              :data="tableData.filter(data => !input || data.name.toLowerCase().includes(input.toLowerCase()))">
                  <el-table-column prop="sid" label="id" width="60"></el-table-column>
                  <el-table-column prop="bid" label="设备编号" width="60"></el-table-column>
                  <el-table-column prop="name" label="设备名称" width="150"></el-table-column>
                  <el-table-column prop="shijian" label="维修耗时" width="100"></el-table-column>
                  <el-table-column prop="cost" label="维修费用" width="100"></el-table-column>
                  <el-table-column prop="reason" label="故障原因" ></el-table-column>
                  <el-table-column prop="repairdate" label="修理日期" width="180"></el-table-column>
                  <el-table-column prop="person" label="维修人" width="100"></el-table-column>
                  <el-table-column label="操作" width="120px">
                      <template slot-scope="scope">
                          <el-tooltip  effect="dark" content="修改信息" placement="top" :enterable="false">
                              <el-button type="primary" icon="el-icon-edit" size="mini"  @click="showEditDialog(scope.row.sid)"></el-button>
                          </el-tooltip>
                          <el-tooltip  effect="dark" content="删除信息" placement="top" :enterable="false">
                              <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeUserById(scope.row.sid)"></el-button>
                          </el-tooltip>
                      </template>
                  </el-table-column>
              </el-table>
        </el-card>

        <!-- 添加设备 -->
        <el-dialog title="添加维修信息" :visible.sync="addDialogVisible">
          <el-form :model="ruleForm" ref="addFromRef" status-icon :rules="addFromRules"  label-width="100px" >
              <el-form-item label="编号" prop="bid">
                <el-select v-model="ruleForm.bid" @change="valueChange">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
              </el-form-item>
              <el-form-item label="设备名称" prop="name">
                <el-input v-model="ruleForm.name" disabled></el-input>
              </el-form-item>
              <el-form-item label="维修耗时" prop="shijian">
                <el-input v-model="ruleForm.shijian"></el-input>
              </el-form-item>
              <el-form-item label="维修费用" prop="cost">
                <el-input v-model="ruleForm.cost"></el-input>
              </el-form-item>
              <el-form-item label="故障原因" prop="reason">
                <el-input v-model="ruleForm.reason"></el-input>
              </el-form-item>
              <el-form-item label="维修日期" prop="repairdate">
                <el-date-picker v-model="ruleForm.repairdate" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
              </el-form-item>
              <el-form-item label="维修人员" prop="person">
                <el-input v-model="ruleForm.person"></el-input>
              </el-form-item>
            </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="addDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitForm">确 定</el-button>
          </div>
        </el-dialog>
        
        <!-- 修改信息 -->
        <el-dialog title="修改设备信息" :visible.sync="editDialogVisible">
          <el-form :model="editForm" ref="addFromRef" status-icon :rules="addFromRules"  label-width="100px" >
            <el-form-item label="编号" prop="bid">
              <el-select v-model="editForm.bid" @change="niceChange">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
            </el-form-item>
            <el-form-item label="设备名称" prop="name">
              <el-input v-model="editForm.name" disabled></el-input>
            </el-form-item>
            <el-form-item label="维修耗时" prop="shijian">
              <el-input v-model="editForm.shijian"></el-input>
            </el-form-item>
            <el-form-item label="维修费用" prop="cost">
              <el-input v-model="editForm.cost"></el-input>
            </el-form-item>
            <el-form-item label="故障原因" prop="reason">
              <el-input v-model="editForm.reason"></el-input>
            </el-form-item>
            <el-form-item label="维修日期" prop="repairdate">
              <el-date-picker v-model="editForm.repairdate" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
            </el-form-item>
            <el-form-item label="维修人员" prop="person">
              <el-input v-model="editForm.person"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="editDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="editUserInfo">确 定</el-button>
          </div>
        </el-dialog>
  </div>
</template>

<script>
  export default {
      
      data() {
         
          return {
              input: '',
              tableData:[],
              aid: '',
              sbname:'',
              addDialogVisible: false,
              editDialogVisible: false,
              ruleForm:{
                  name: '',
                  bid: '',
                  shijian: '',
                  cost: '',
                  reason: '',
                  repairdate: '',
                  person: ''
              },
              addFromRules: {
                  bid:[
                      { required: true, message: '请输入设备编号', trigger: 'blur' }
                  ],
                  shijian: [
                      { required: true, message: '请输入维修耗时', trigger: 'blur' }
                  ],
                  cost: [
                      { required: true, message: '请输入维修费用', trigger: 'blur' }
                  ],
                  reason: [
                      { required: true, message: '请输入故障原因', trigger: 'blur' },
                      { min: 3, max: 40, message: '长度在 3 到 40 个字符', trigger: 'blur' }
                  ],
                  repairdate: [
                      { required: true, trigger: 'blur' }
                  ],
                  person: [
                      { required: true, message: '请输入维修人员名字', trigger: 'blur' },
                      { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                  ]

              },
              options:[],
              editForm: {},
              obj: {}

          }
      },
      created() {
          this.getUserinfo();   
      },
      methods: {
          async getUserinfo(){
              const {data: res} = await this.$http.get('http://127.0.0.1:8181/cate/findall')
              for(let i =0; i<res.length; i++){
                this.options.push({value:res[i].aid, label: res[i].aid})
                  if (res[i].repairs.length != 0) {
                    this.sbname = res[i].name
                    this.aid = res[i].aid
                    const rpk = res[i].repairs.length
                    for(let j =0; j<rpk; j++){
                        const rep = res[i].repairs[j]
                        rep['name'] = this.sbname
                        rep['bid'] = this.aid
                        this.tableData.push(res[i].repairs[j])
                    } 
                  }
              }
              
          },
          async niceChange(){
              const {data: xiugai} = await this.$http.get('http://127.0.0.1:8181/cate/findByAid/' + this.editForm.bid)
              this.editForm.name = xiugai[0].name
              console.log(this.editForm)
          },
          async valueChange(){
            if(this.ruleForm.bid != undefined){
              const {data: jieguo} = await this.$http.get('http://127.0.0.1:8181/cate/findByAid/' + this.ruleForm.bid)
              // console.log(jieguo[0].name)
              this.ruleForm.name = jieguo[0].name
            }
          },
          submitForm(){
              this.$refs.addFromRef.validate(async valid => {
                  if (valid) {
                      const res = await this.$http.post('http://127.0.0.1:8181/repair/saveRepairs', this.ruleForm)
                      // console.log(res)
                      if (res.data == 'success') {
                              this.addDialogVisible = false
                              this.tableData = []
                              this.getUserinfo()
                              return this.$message.success('添加维修信息成功！')
                          }
                              return this.$message.error('维修信息添加失败！') 
                  }
              })
          },
          async removeUserById(sid){
              const confirmresult = await this.$confirm('此操作将永久删除该设备信息, 是否继续?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
              }).catch(err =>{
                  err
              })
              if (confirmresult != 'confirm') {
                  return this.$message('已经取消了删除!')
              }

              const res = await this.$http.delete('http://127.0.0.1:8181/repair/deleteRepairs/' + sid)
              // console.log(res)
              if (res.status != 200) {
                  return  this.$message.error('删除设备信息失败')
              }
                  this.$message.success('删除设备信息成功')
                  this.tableData = []
                  this.getUserinfo()
          },
          async showEditDialog(sid){
              this.editDialogVisible =true
              const {data: res} = await this.$http.get('http://127.0.0.1:8181/repair/findBysid/' + sid)
              const {data: xiugai} = await this.$http.get('http://127.0.0.1:8181/cate/findByAid/' + res[0].bid)
              res[0].name = xiugai[0].name
              console.log(res[0])
              this.editForm = res[0]
          },
          editUserInfo(){
              this.$refs.addFromRef.validate(async valid => {
                  if (valid) {
                         const res = await this.$http.put('http://127.0.0.1:8181/repair/update', this.editForm)
                        //  console.log(res)
                          if (res.data == 'success') {
                              this.editDialogVisible = false
                              this.tableData = []
                              this.getUserinfo()
                              return this.$message.success('信息修改成功！')
                          }
                              return this.$message.error('信息修改失败！') 
                  }
              })
          }
      
      }
  }
</script>
<style scoped>

</style>